<template>
  <div id='hierarchy'>
    <com-head  :opacity='0'>层级结构</com-head>
    <div class="hierarchy">
        <!-- <table class="navth" border="1" width=100% cellspacing=0 rules=none frame=void>
            <tr>
                <th width=40%  colspan="2">I</th>
                <th width=30% >L</th>
                <th width=30% >R</th>
            </tr>
        </table> -->

        <!-- <table class="tablemes"  border="1" width=100%  rules=none frame=void cellspacing=0>
            <tr>
                <td width=10% >1</td>
                <td width=30% class="active1">{{user.user_num}}</td>
                <td width=30% :class="[left[user.id][1]==0?'active':'active1']">{{left[user.id][0]}}</td>
                <td width=30% :class="[right[user.id][1]==0?'active':'active1']">{{right[user.id][0]}}</td>
            </tr>
            <tr v-for="(item,index) in ivtteam"  :key="index">
                <td width=10% >{{item.level+1}}</td>
                <td width=30% :class="[item.status==0?'active':'active1']">{{item.user_num}}</td>
                <td width=30% :class="[left[item.id][1]==0?'active':'active1']">{{left[item.id][0]}}</td>
                <td width=30% :class="[right[item.id][1]==0?'active':'active1']">{{right[item.id][0]}}</td>
            </tr>
        </table> -->
        <table class="tablemes"  border="1" width=100%  rules=none frame=void cellspacing=0>
            <!-- <tr class="tablenav" width=100%>
                <th width=40%  colspan="2">I</th>
                <th width=30% >L</th>
                <th width=30% >R</th>
            </tr> -->
            <table class="tablenav" border="1" width=92% cellspacing=0 rules=none frame=void>
                <tr>
                    <th width=40%  colspan="2">I</th>
                    <th width=30% >L</th>
                    <th width=30% >R</th>
                </tr>
            </table>
            <tr>
                <td width=10% >1</td>
                <td width=30% class="active1"><div class="account">{{user.user_num}}</div><p>{{user.rank|Tostar}}</p></td>
                <td width=30% :class="[left[user.id][1]==0?'active':left[user.id][3]==0?'active2':'active1']"><div class="account">{{left[user.id][0]}}</div><p>{{left[user.id][2]|Tostar}}</p></td>
                <td width=30% :class="[right[user.id][1]==0?'active':right[user.id][3]==0?'active2':'active1']"><div class="account">{{right[user.id][0]}}</div><p>{{right[user.id][2]|Tostar}}</p></td>
            </tr>
            <tr v-for="(item,index) in ivtteam"  :key="index">
                <td width=10% >{{item.level+1}}</td>
                <td width=30% :class="[item.status==0?'active':item.is_activation==0?'active2':'active1']"><div class="account">{{item.user_num}}</div><p>{{item.rank|Tostar}}</p></td>
                <td width=30% :class="[left[item.id][1]==0?'active':left[item.id][3]==0?'active2':'active1']"><div class="account">{{left[item.id][0]}}</div><p>{{[left[item.id][2]]|Tostar}}</p></td>
                <td width=30% :class="[right[item.id][1]==0?'active':right[item.id][3]==0?'active2':'active1']"><div class="account">{{right[item.id][0]}}</div><p>{{[right[item.id][2]]|Tostar}}</p></td>
            </tr>
        </table>
        <!-- <table class="tablemes"  border="1" width=100%  rules=none frame=void cellspacing=0>
            <tr>
                <td width=10% >1</td>
                <td width=30% class="active1"></td>
                <td width=30% ><div class="account">11111</div><p>{{grade|Tostar}}</p></td>
                <td width=30% ></td>
            </tr>
            <tr>
                <td width=10% ></td>
                <td width=30%></td>
                <td width=30%></td>
                <td width=30%></td>
            </tr>
        </table> -->
    </div>
    
  </div>
</template>

<script>
export default {
  name: "hierarchy",
  data() {
    return {
      user: {},
      left: [],
      right: [],
      ivtteam: [],
      grade: "8",
      starnum: []
    };
  },

  computed: {},

  created() {
    for (let i = 0; i < this.grade; i++) {
      this.starnum.push(1);
    }
    this.loading();
  },

  mounted() {},

  methods: {
    loading() {
      this.axios
        .post("apireg/hierarchy", {
          token: this.token()
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.user = data.data.user;
            this.left = data.data.left;
            this.right = data.data.right;
            this.ivtteam = data.data.ivtteam;
            this.$bus.$emit("toast", data.data);
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style lang='scss' scoped>
#hierarchy {
  padding-top: 164px;
  border-left: 1Px solid rgba(221, 221, 221, 1);
  .hierarchy {
    // width: 750px;
    margin: 0 32px;
    .tablemes {
      background-color: #fff;
      text-align: center;
      line-height: 82px;
      font-size: 30px;
      .tablenav {
        position: fixed;
        margin: 0 32px;
        // width: 100%;
        top: 80px;
        right: 0;
        left: 0;
        th {

        background-color: #e4e9ea;
        border-left: 1Px solid rgba(221, 221, 221, 1);
      }
      }
      .account {
        display: inline-block;
        font-size: 34px;
        // width: 30%;
        // word-wrap: break-word;
        word-break:break-all;
      }
      p {
        // display: inline-block;
        line-height: 40px;
        // width: 200px;
        // word-wrap: break-word;
        word-break:break-all;
        font-size: 40px;
        color: rgb(255, 187, 0);
      
      }
      tr {
        border-top: 1Px solid rgba(221, 221, 221, 1);
        td {
          border-right: 1Px solid rgba(221, 221, 221, 1);
        }
        .active1 {
          color: #fff;
          background-color: blue;
        }
        .active {
          color: #fff;
          background-color: red;
        }
        .active2 {
          color: #fff;
          background-color: rgb(158, 134, 67);
          &::after {
            content: '待激活';
            // color: rgb(238, 92, 92);
          }
        }
      }
    }
  }
}
</style>